<script setup>
import {ref,reactive} from "vue"
import SwiperSlideDefaultTemplate from '@/components/SwiperSlideDefaultTemplate/index.vue'

let commentList = [{
    imgUrl:"https://cdc-wp-blog-1258344706.cos.ap-guangzhou.myqcloud.com/production/wp-content/uploads/2021/10/10.idqqimg.jpg",
    title:"设计不设限,第三届SICC服务创新大会在深举办",
    desc:"5月16日,第三届SICC服务创新大会在深圳召开,右腾讯用撒娇的黄金卡仕达杰卡斯奥斯卡几点回家奥斯卡打开按实际肯定会",
    targetUrl:"www.baidu.com"
},{
    imgUrl:"https://cdc-wp-blog-1258344706.cos.ap-guangzhou.myqcloud.com/production/wp-content/uploads/2021/10/Group-71.png",
    title:"产品力峰会50张主会场门票免费送!",
    desc:"5月16日,第三届SICC服务创新大会在深圳召开,右腾讯用撒娇的黄金卡仕达杰卡斯奥斯卡几点回家奥斯卡打开按实际肯定会",
    targetUrl:"www.baidu.com"
},{
    imgUrl:"https://cdc-wp-blog-1258344706.cos.ap-guangzhou.myqcloud.com/production/wp-content/uploads/2021/10/Group-70.png",
    title:"CDC夜校之辩论专场来袭",
    desc:"5月16日,第三届SICC服务创新大会在深圳召开,右腾讯用撒娇的黄金卡仕达杰卡斯奥斯卡几点回家奥斯卡打开按实际肯定会",
    targetUrl:"www.baidu.com"
},{
    imgUrl:"https://cdc-wp-blog-1258344706.cos.ap-guangzhou.myqcloud.com/production/wp-content/uploads/2022/01/Frame-2.png",
    title:"CDC大电影重磅回归,海量精彩",
    desc:"5月16日,第三届SICC服务创新大会在深圳召开,右腾讯用撒娇的黄金卡仕达杰卡斯奥斯卡几点回家奥斯卡打开按实际肯定会,按实际肯定会开服务器额尽快哈三等奖卡萨加快点回家卡萨丁",
    targetUrl:"www.baidu.com"
},{
    imgUrl:"https://cdc-wp-blog-1258344706.cos.ap-guangzhou.myqcloud.com/production/wp-content/uploads/2021/10/%E5%A4%9C%E6%A0%A1.png",
    title:"CDC夜校回顾NO.2",
    desc:"5月16日,第三届SICC服务创新大会在深圳召开,右腾讯用撒娇的黄金卡仕达杰卡斯奥斯卡几点回家奥斯卡打开按实际肯定会",
    targetUrl:"www.baidu.com"
}]

</script>
<template>
  <SwiperSlideDefaultTemplate :isWidth="false">
    <div class="swiper-slide-four">
        <div class="swiper-slide-four-content jc-center-width">
            <div class="four-main">
                <div class="four-title-box">
                    <h1 class="four-title">团队动态</h1>
                    <div class="fix"></div>
                </div>
                <div class="four-grid-list">
                    <div class="four-grid-item" v-for="(gridItem,gridIndex) in commentList">
                        <div class="grid-item-wrap">
                            <div class="grid-item-desc">
                                <h1 class="grid-item-title">{{ gridItem.title }}</h1>
                                <p class="grid-item-wrap-desc">
                                    {{ gridItem.desc }}
                                </p>
                            </div>
                        </div>
                        <img class="grid-item-cover" :src="gridItem.imgUrl" alt="" srcset="">
                    </div>
                </div>
            </div>
        </div>
    </div>
  </SwiperSlideDefaultTemplate>
</template>
<style lang="scss" scoped>
.swiper-slide-four {
  padding-top: var(--jc-header-height);
    width: 100%;
    height: 100%;
    background: url(https://cdc-private.cdn-go.cn/cdc.tencent.com/latest/assets/left-bottom-bg@2x.d76c8e17.png) bottom left / 445px, url(https://cdc-private.cdn-go.cn/cdc.tencent.com/latest/assets/right-top-bg@2x.67904317.png) top right / 463px;
    background-repeat: no-repeat;
    background-color: var(--jc-desc-page-color);
    .swiper-slide-four-content {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .four-main {
            width: 100%;
            height: 670px;
        }
        .four-title-box {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
            .four-title {
                font-size: 56px;
                letter-spacing: 6px;
                text-align: justify;
                line-height: 80px;
            }
            .fix {
                margin-left: 30px;
                width: 64px;
                height: 12px;
                background: #e40011;
                border-radius: 1px;
            }
        }
        .four-grid-list {
            display: grid;
            grid-template-columns: 525px 540px 540px;
            grid-template-rows: 270px 270px 270px;
            grid-row-gap: 10px;
            grid-column-gap: 10px;
            grid-auto-flow: row;
            .four-grid-item:first-child {
                grid-row-start: 1;
                grid-row-end: 3;
            }
            .four-grid-item {
                cursor: pointer;
                position: relative;
                overflow: hidden;
                .grid-item-wrap {
                    transition: .3s all;
                    color: var(--jc-color-text-primary);
                    position: absolute;
                    bottom: 0px;
                    padding: 0px 15px;
                    width: 100%;
                    background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 100%);
                    overflow: hidden;
                    opacity: .8;
                    .grid-item-desc {
                        padding-top: 10px;
                        width: 100%;
                        height: max-content;
                        .grid-item-title {
                            width: 100%;
                            white-space: nowrap;
                            overflow: hidden;
                            font-size: 20px;
                            line-height: 36px;
                            height: 36px;
                            letter-spacing: 1.6px;
                            text-overflow: ellipsis;
                            word-break: break-all;
                        }
                        .grid-item-wrap-desc {
                            width: 100%;
                            word-wrap: break-word;
                            overflow: hidden;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            text-overflow: ellipsis;
                            font-size: 14px;
                            line-height: 24px;
                            height: 48px;
                            letter-spacing: 1.2px;
                            margin-top: 10px;
                            color: var(--jc-color-text-secondary);
                            display: none;
                            opacity: .8;
                        }
                    }
                }
                &:hover .grid-item-desc .grid-item-wrap-desc {
                    display: -webkit-box;
                }
            }
            .grid-item-cover {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>
